<template>
  <div class="OrderList">
    <div class="pro-box clearfix">
      <div class="h-text">订单信息</div>
      <div class="info-title fl">{{ '订单编号：'+infoTitleLeft}}</div>
      <div class="reinfo fr" v-if="isRight">
        <div v-if="!isReceive" @click="confirmReceive">确认收货</div>
        <div v-else class="clearfix finished">
          <div>已完成
            <div class="fr delete" @click="remove">
              <van-icon name="delete" size="19" />
            </div>
          </div>

        </div>
      </div>

    </div>
    <div class="cell-list">
      <!-- 商品信息 -->
      <slot></slot>
    </div>
    <div class="bottom-into">
      <div class="circle">
        <div class="fl circle-box circle-lert"></div>
        <div class="fr circle-box circle-right"></div>
      </div>
      <div class="date b-textsize" v-if="date!=''">{{ date }}</div>
      <div class="clearfix">
        <div class="fl b-textsize">共计{{ count }}件商品</div>
        <div class="fr total b-pricesize">订单金额：￥{{ total }}</div>
      </div>

    </div>

  </div>
</template>

<script>
import '@/assets/less/orderlist.less'
export default {
  name: 'OrderList',
  props: {
    // 左边标题
    infoTitleLeft: {
      type: String,
      default: ''
    },
    // 是否显示右边信息
    isRight: {
      type: Boolean,
      default: false
    },
    // 时间
    date: {
      type: String,
      default: ''
    },
    // 商品数量
    count: {
      type: Number,
      default: 0
    },
    // 订单总金额
    total: {
      type: [String, Number],
      default: ''
    },
    // 确认收货
    isReceive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 确认收货
    confirmReceive() {
      this.$emit('confirm-receive')
    },
    remove() {
      this.$emit('remove')
    }
  }
}
</script>

<style>
</style>